<template>
	<view>
		<view class="map-wrap">
			<map :markers="ms" id="dd" ref="dd" show-location="true" class="map"></map>
		</view>
		<view class="store-wrap">
			<view v-for="(item, index) in storeList" :key="index" class="store-item d-flex align-items-center just-content-center">
				<view class="item-left">
					<view class="store-name">{{ item.name }}</view>
					<view class="xd-wrap">
						<view class="ws-wrap d-flex align-items-center just-content-center">
							<view class="now">NOW</view>
							<view class="zz-wrap">现在下单，立即制作</view>
						</view>
					</view>
					<view class="store-address">
						<i class="iconfont icon-duomeitiicon-"></i>
						<text>{{ item.address }}</text>
					</view>
					<view class="store-time">
						<i class="iconfont icon-time"></i>
						<text>{{ item.time }}</text>
					</view>
					<view class="ad-wrap">
						<view class="ad-item" v-for="(vo, i) in item.ad" :key="i">{{ vo.name }}</view>
					</view>
				</view>
				<view class="item-right d-flex flex-column align-items-center just-content-center">
					<view class="qxd">去下单</view>
					<view class="jl">距离{{ item.distance }}km</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ms: [{
					id: 1,
					latitude: 30.3,
					longitude: 120.2,
					width: 30,
					height: 30
				}],
				storeList: [
					{
						name: "郑州朗月公园茂",
						address: "赤乌恒星系中华人民共和国河南省郑州市高新区朗月公园茂",
						time: "9-21",
						distance: "1.2",
						ad: [
							{ name: "多肉离职右手" },
							{ name: "水蜜桃右手" },
							{ name: "碧根果右手" }
						]
					},
					{
						name: "郑州朗月公园茂",
						address: "赤乌恒星系中华人民共和国河南省郑州市高新区朗月公园茂",
						time: "9-21",
						distance: "1.2",
						ad: [
							{ name: "多肉离职右手" },
							{ name: "水蜜桃右手" },
							{ name: "碧根果右手" }
						]
					}
				]
			};
		},
		mounted() {
			let con = uni.createMapContext("dd", this)
			con.moveToLocation({
				longitude: 120.2,
				latitude: 30.3
			})
			con.translateMarker({
				markerId: 1, // 必填
				destination: {
					longitude: 120.2,
					latitude: 30.3 // 必填
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
	}

	.map-wrap {
		.map {
			height: 490upx;
			width: 100%;
		}
	}

	.store-wrap {
		.store-item {
			height: 288upx;
			width: 690upx;
			margin: 20upx auto 0;
			background-color: #fff;
			box-sizing: border-box;
			&.active {
				border: 1px solid pink;
			}
			.item-left {
				padding: 0 30upx;
				$color: #dcad7a;
				.store-name {
					font-size: 25upx;
					color: #383838;
				}
				.xd-wrap {
					text-align: left;
					margin: 10upx 0;
					.ws-wrap {
						border-radius: 4upx;
						width: 220upx;
						.now {
							height: 28upx;
							color: #fff;
							background-color: #343434;
							font-size: 16upx;
							line-height: 28upx;
							width: 60upx;
							text-align: center;
						}
						.zz-wrap {
							height: 28upx;
							color: #fff;
							background-color: $color;
							font-size: 16upx;
							line-height: 28upx;
							width: 160upx;
							text-align: center;
						}
					}
				}
				.store-address {
					font-size: 22upx;
					color: #454545;
					.iconfont {
						font-size: 22upx;
						padding-right: 8upx;
					}
					margin-bottom: 10upx;
				}
				.store-time {
					font-size: 18upx;
					color: #454545;
					.iconfont {
						font-size: 18upx;
						padding-right: 8upx;
					}
				}
				.ad-wrap {
					margin-top: 20upx;
					.ad-item {
						height: 34upx;
						font-size: 20upx;
						line-height: 34upx;
						box-sizing: content-box;
						border: 1px solid $color;
						color: $color;
						display: inline-block;
						padding: 0 8upx;
						border-radius: 4upx;
						margin-right: 10upx;
					}
				}
			}
			.item-right {
				width: 150upx;
				height: 208upx;
				border-left: 1px solid #ededed;
				text-align: center;
				.qxd {
					font-size: 24upx;
					color: #060606;
					text-align: center;
				}
				.jl {
					font-size: 18upx;
					color: #454545;
				}
			}
		}
	}
</style>
